'use strict';

import React, { Component } from 'react';

import {
  StyleSheet,
  View,
  PanResponder,
  Animated,
  TouchableOpacity,
  Text,
  Switch,
  ListView,
} from 'react-native';

import Constants from '../../common/Constants'
import SizeUtils from '../../common/SizeUtils'
import TImage from '../../components/TImage'
import Config from '../../config'
import ToastUtils from '../../common/ToastUtils'
import {SearchBar,CheckBox} from 'react-native-elements';
import CommonAvatarView from '../common/CommonAvatarView';
import QZ_AdminListAction from '../../actions/quanzi/QZ_AdminListAction'
import QZ_SearchBoardUserListAction from '../../actions/quanzi/QZ_SearchBoardUserListAction'
import QZ_sendUpdateQZSettingAction from '../../actions/quanzi/QZ_sendUpdateQZSettingAction';

var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2,
  sectionHeaderHasChanged:(s1, s2) => s1 !== s2});
class QZ_ManagerView extends Component {
	constructor(props) {
    	super(props);
    	this.state={
    	  isshow:false,
        isswitch:false, 
        board_id:'',
        adidlist:[],
    	}
    this._panResponder = PanResponder.create({
      onStartShouldSetPanResponder: (event, gestureState) => {
        this.close();
        return false;
      },
    });
  	}
  componentWillUpdate(nextProps, nextState) {
    if (nextState.needRefresh == true) {
      nextState.needRefresh = false
      ToastUtils.show(nextState.viewStatus===3 ? '修改成功' : '修改失败')
      if (nextState.viewStatus===3) {
        nextState.text='';
        nextState.adidlist=[],
        this.close();
        this.props.doRefresh&&this.props.doRefresh();
      }
    }
  }
	open(board_id,no_check){
	  this.setState({
		  isshow:true,
      board_id:board_id,
      searchText:'',
      serch:'',
      adidlist:[],
      isswitch:no_check===1?true:false,
	  });
    this.requestData(board_id);
	}
  requestData(board_id){
    new QZ_AdminListAction().call(this, {board_id:board_id,page:1,page_size:200})
  }
	close(){
	  this.setState({
		  isshow:false,
      board_id:'',
      adidlist:[],
      searchText:'',
      serch:'',
	  });
	}
  postAction(){
    new QZ_sendUpdateQZSettingAction().call(this, {
      board_id:this.state.board_id,
      no_check:1,
      admin_id:this.state.adidlist
    })
  }
  _onSearchBarChange(data) {
    this.setState({
      searchText:data,
    })
  }
  _getSearchBarContainerStyle() {
    return {width:'100%', borderTopWidth:0,borderBottomWidth:0,
      height:SizeUtils.translateDesignHeightToCode(62),paddingLeft:-4,backgroundColor:"#00000000",};
  }
  _onSubmitEditing() {
    if (this.state.searchText.length<1) {
      return;
    }
    if (this.state.searchText.length<3) {
      ToastUtils.show('请最少填写三个字符');
      return;
    }
    new QZ_SearchBoardUserListAction().call(this, {board_id:this.state.board_id,search_word:this.state.searchText})
  }
  _onRenderRow(rowData,sectionId,rowId){
    const ischeck = this.state.adidlist.indexOf(rowData.user_id)>=0?true:false;
    return(
      <View style={{
        height:SizeUtils.translateDesignHeightToCode(100),
        flexDirection:"row",
        paddingLeft:SizeUtils.translateDesignWidthToCode(40),
        paddingRight:SizeUtils.translateDesignWidthToCode(0),
        alignItems: 'center',
        borderColor:'#eeeeee',
            borderBottomWidth:SizeUtils.translateDesignHeightToCode(3),
      }}>
        <CommonAvatarView avatarUri={this._getImageSource(rowData)} size={80}/>
        <View style={{flex:1}}>
          <Text style={{marginLeft:SizeUtils.translateDesignWidthToCode(20),
            flex:1,
                fontSize:SizeUtils.translateFontSizeToCode(30),
                backgroundColor:'#fff0',
                color:'#000',
              }}> {rowData.nick} </Text>
          <Text style={{marginLeft:SizeUtils.translateDesignWidthToCode(20),
            flex:1,
                fontSize:SizeUtils.translateFontSizeToCode(30),
                backgroundColor:'#fff0',
                color:'#000',
              }}> {rowData.department} </Text>
        </View>
        <CheckBox right  checked={ischeck} onPress={()=>{
          var list = this.state.adidlist;
          if (list.indexOf(rowData.user_id)>=0) {
              list.splice(list.indexOf(rowData.user_id),1)
          }else{
              list.push(rowData.user_id)
          }
          this.setState({
            adidlist:list 
          });
        }} containerStyle={{backgroundColor:"#fff",borderWidth:0}}/>
      </View>
    );
  }
  _renderSectionHeader(sectionData, sectionID){
    if (sectionID==='section1') {return null}
    return(
        <View style={{height:20,alignItems: 'center',backgroundColor:'#fff'}}>
          <Text style={{fontSize:16,color:'#000'}}>{sectionID}</Text>
        </View>
    )
  }
  _getImageSource(data) {
      if(data.avatar_url) {
        return {uri:data.avatar_url};
      }else {
        return "";
      }
    }
	render() {
    console.log()
		if (!this.state.isshow) {return (<View/>)}
    	return (
      		<View style={{position:'absolute',top:0,left:0,bottom:0,right:0,alignItems: 'center',}}>
      			<View style={[styles.background,]} {...this._panResponder.panHandlers}/>
            <View style={{marginTop:80,width:SizeUtils.getWindowSize().width*0.88,
              borderRadius: 5,
              overflow: 'hidden',
              alignItems: 'center',
              backgroundColor:'#fff'}}>
                <Text style={{marginTop:15,fontSize: SizeUtils.translateFontSizeToCode(34), color: '#000' }}>{'设置内容审核方式'}</Text>
                <Text style={{marginTop:10,fontSize: SizeUtils.translateFontSizeToCode(34), color: '#000' }}>{'设置管理员'}</Text>
                <View style={[styles.conent,{
                  height:SizeUtils.getWindowSize().height*0.5,
                }]}>
                  <View>
                    <SearchBar
                      noIcon = {true}
                      containerStyle = {this._getSearchBarContainerStyle()}
                      inputStyle = {{padding:0,height:SizeUtils.translateDesignHeightToCode(62), color:"#000000",
                        backgroundColor:"#eeeeee", marginLeft:0, marginRight:0,
                        marginTop:2, marginBottom:0, paddingRight:0, paddingLeft:SizeUtils.translateDesignWidthToCode(56),
                        fontSize:SizeUtils.translateFontSizeToCode(28)}}
                      multiline = {false}
                      onSubmitEditing = {() => this._onSubmitEditing()}
                      value = {this.state.searchText}
                      underlineColorAndroid="transparent"
                      returnKeyType = "search"
                      blurOnSubmit={true}
                      onChangeText={this._onSearchBarChange.bind(this)}
                      clearButtonMode={'always'}
                      enablesReturnKeyAutomatically={true}
                      placeholder='请输入名字、编号、手机号码' />
                      <View style={{position:"absolute",
                        top:SizeUtils.translateDesignWidthToCode(20),
                        left:SizeUtils.translateDesignWidthToCode(20)}}>
                          <TImage source={require("../../../resource/images/workhard/search_gray.png")}
                            style={{width:28, height:28, }}/>
                      </View>
                  </View>
                  <ListView
                    style={{flex:1,marginTop:10}}
                    removeClippedSubviews={false}
                    enableEmptySections={true}
                    renderSectionHeader={this._renderSectionHeader.bind(this)}
                    dataSource={ds.cloneWithRowsAndSections(
                      {
                        'section1':this.state.serch||[],
                        '已有管理员':this.state.data||[],
                    })}
                    renderRow={this._onRenderRow.bind(this)}
                  />
                </View>
                <View style={styles.bottom}>
                    <TouchableOpacity style={{alignItems: 'center',justifyContent: 'center',
                      borderWidth: SizeUtils.translateDesignNumToCode(3),
                      width:80,
                      height:40,
                      marginRight:40,
                      borderRadius:4,
                      borderColor: '#eeeeee',}} onPress={() => {this.close()}}>
                        <Text style={{color:'#000'}}>取消</Text>
                    </TouchableOpacity >
                    <TouchableOpacity style={{alignItems: 'center',justifyContent: 'center',
                      width:80,
                      borderRadius:4,
                      height:40,
                      backgroundColor:'#6699CC',
                      }} onPress={() => {this.postAction()}}>
                        <Text style={{color:'#fff'}}>确认设置</Text>
                    </TouchableOpacity >
                </View>
              <TouchableOpacity style={styles.close} onPress={() => {this.close()}}>
                <Text style={{ fontSize: SizeUtils.translateFontSizeToCode(28), color: '#6699CC' }}>{'关闭'}</Text>
              </TouchableOpacity>
            </View>
      		</View>
    	);
  	}
}

const styles = StyleSheet.create({
	background: {
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    position: 'absolute',
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
  conent:{
    marginTop:18,
    width:'92%',
  },
  bottom:{
    flexDirection: 'row',
    height:60,
    justifyContent: 'center',
    alignItems: 'center',
  },
  close:{
    top: 2,
    right: 8,
    position: 'absolute',
    width:40,
    height:40,
    justifyContent: 'center',
    alignItems: 'center',
  },
});


export default QZ_ManagerView;